<template>
  <div class="publish">
    <van-nav-bar title="发表评价" left-arrow @click-left="backUp" />
    <div class="goods" v-for="item in goods" :key="item.goods_id">
      <img :src="item.goods_cover" alt />
      <p>{{item.goods_name}}</p>
    </div>
    <!-- <van-radio-group v-model="radio">
      <van-radio name="a" checked-color="#FBA86F">好评</van-radio>
      <van-radio name="b" checked-color="#FBA86F">中评</van-radio>
      <van-radio name="c" checked-color="#FBA86F">差评</van-radio>
    </van-radio-group>-->
    <div class="rate">
      <!-- <h3>评分：</h3> -->
      <ul>
        <li>
          <span>评分：</span>
          <van-rate v-model="rateDes" />
        </li>
        <!-- <li>
          物流服务：
          <van-rate v-model="rateLogistics" />
        </li>
        <li>
          服务态度：
          <van-rate v-model="rateService" />
        </li>-->
      </ul>
    </div>
    <div class="evaluation">
      <van-field v-model="evaluation" type="textarea" placeholder="在此评价" rows="3" autosize />
      <van-uploader :after-read="onRead">
        <van-icon name="photograph" />
      </van-uploader>
    </div>
    <div class="imgs">
      <img v-for="item in imgs" :key="item.image_id" :src="item.image_url" />
    </div>
    <button class="submit-btn" @click="comment">提交评价</button>
  </div>
</template>

<script>
import { RadioGroup, Radio, Field, Uploader, Rate } from "vant";
import api from "@/utils/api";
export default {
  name: "publish",
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Field.name]: Field,
    [Uploader.name]: Uploader,
    [Rate.name]: Rate
  },
  data() {
    return {
      goods: [],
      // radio: "a",
      imgs: [],
      evaluation: "",
      rateDes: 0
      // rateLogistics: 3,
      // rateService: 4
    };
  },
  mounted() {
    this.getGoods();
  },
  methods: {
    getGoods() {
      this.$axios({
        method: "get",
        url: api.comment,
        params: {
          token: localStorage.getItem("token"),
          order_id: this.$route.query.order_id
        }
      }).then(res => {
        console.log(res);
        this.goods = res;
      });
    },
    backUp() {
      this.$router.go(-1);
    },
    onRead(file) {
      console.log(file);
      this.uploadPicBase(file.content);
    },
    uploadPicBase(content) {
      this.$axios({
        method: "post",
        url: api.uploadPicBase,
        data: content
      }).then(res => {
        console.log(res);
        this.imgs.push(res);
      });
    },
    comment() {
      let image_ids = [];
      if (this.imgs.length != 0) {
        this.imgs.forEach(e => {
          image_ids.push(e.image_id);
        });
      }
      console.log(image_ids);
      image_ids = image_ids.join(",");
      console.log(image_ids);
      this.$axios({
        method: "post",
        url: api.comment,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: this.$route.query.order_id,
          image_id: image_ids,
          score: this.rateDes,
          content: this.evaluation
        })
      }).then(res => {
        console.log(res);
        this.$router.go(-1);
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.publish {
  background-color: #fff;
  // border: 1px solid red;
  min-height: 100vh;
  .goods {
    border-top: 1px solid @borderColor;
    background-color: #fff;
    display: flex;
    padding: 15px;
    align-items: center;
    img {
      flex: 1;
      // max-width: 100px;
      max-height: 60px;
    }
    p {
      flex: 4;
      .font-dpr(12px);
      color: @fontColorH3;
      margin-left: 10px;
    }
  }
  .evaluation {
    background-color: @borderColor;
    margin: 0 15px;
    border-radius: 6px;
    .van-field {
      background-color: transparent;
    }
    .van-uploader {
      background-color: transparent;
    }
  }
  .van-radio-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    line-height: 2.4;
    background-color: #fff;
    border-top: 1px solid @borderColor;
    border-bottom: 1px solid @borderColor;
    /deep/ .van-radio__label {
      .font-dpr(14px);
    }
  }
  .rate {
    padding: 10px 15px;
    background-color: #fff;
    h3 {
      .font-dpr(14px);
      line-height: 3;
    }
    li {
      display: flex;
      .font-dpr(14px);
      line-height: 2.4;
      align-items: center;
      // border: 1px solid red;
      .van-rate {
        // border:1px solid blue;
        padding-top: 5px;
      }
    }
  }
}
.van-cell:not(:last-child)::after {
  border: none;
}
/deep/.van-uploader {
  // background-color: #fff;
  width: 100vw;
  margin-bottom: 2px;
  margin-left: 15px;
  .van-icon {
    .font-dpr(40px);
    color: @tipColor;
  }
}
.imgs {
  padding: 10px 5px;
  img {
    display: inline-block;
    width: 120px;
    height: 120px;
  }
}
.submit-btn {
  display: block;
  width: 300px;
  height: 36px;
  background: @priColor;
  border-radius: 18px;
  border: none;
  margin: 0 auto;
  position: fixed;
  color: #fff;
  .font-dpr(14px);

  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}
</style>